<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    v-on:submit.prevent的.prevent 修饰符表示阻止表单的默认提交行为(即阻止默认访问到百度)
-->
<div id="app">
  <form action="http://www.baidu.com" v-on:submit.prevent="onMySubmit">
    妖怪名: <input type="text" v-model:value="monster.name"></input> <br><br>
    <button type="submit">注册</button>
  </form>
  <br><br>
  <h1>修饰符扩展案例</h1>
  <button v-on:click.once="onMySubmit">点击一次</button>
  <br>
  <h1>修饰符扩展案例</h1>
  <!--按下enter 执行onMySubmit-->
  <input type="text" v-on:keyup.enter="onMySubmit">
  <!--按下down执行onMySubmit-->
  <input type="text" v-on:keyup.down="onMySubmit">
  <!--自动去掉两边空格-->
  <input type="text" v-model.trim="xxx">
</div>
<!--引入vue.js-->
<script src="vue.js"></script>
<script>
  let vm=new Vue({
    el:"#app",  //创建的vue实例挂载到 id=app的div
    data:{
      monster:{  //monster数据(对象)的属性，可以动态生成

      }
    },
    methods:{ //方法池
      onMySubmit(){
       if(this.monster.name){ //如果monster.name存在 "",undefined,null都默认为false
         console.log("提交表单 name=",this.monster.name)
       }else{//如果monster.name不存在
         console.log("请输入名字")
       }
      }
    }
  })
</script>
</body>
</html>